<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>我的空间</title>
    <base th:href="@{/}">
    <script type="text/javascript" th:src="@{/bootstrap/js/jquery.js}"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/font-awesome/css/font-awesome.min.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/bootstrap/css/iconfont/menu/iconfont.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/bootstrap/css/index/content.css}" type="text/css"/>
    <!--div layer css-->
    <link rel="stylesheet" th:href="@{/bootstrap/css/my-layer-div.css}">
    <style>

    </style>
</head>
<body>
<div id="container">
    <!--diary list-->
    <!--<div class="diary">
        <div class="diary_item item_title">
            <span class="title" href="javascript:void(0);">抱歉, 你还没有添加任何日记哦</span>
        </div>
        <div class="diary_item item_date_view">
            <span class="date_view">
                <i class="fa fa-telegram" aria-hidden="true"></i>
                <span class="view_title">让我们, </span>
                <span class="c_date">开启征程</span>
            </span>
        </div>
        <div class="diary_item item_more_btn">
            <span class="show_more" onclick="writeDiary()">赶紧添加吧 <i class="fa fa-comments-o"
                                                                    aria-hidden="true"></i></span>
        </div>
    </div>-->
</div>
<script th:src="@{/bootstrap/js/jquery.js}"></script>
<script th:src="@{/bootstrap/js/JSONUtil.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/bootstrap/js/layopen.js}"></script>
<script th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
<script>
    $(function () {
        // 初始化页面
        init();
    });

    function init() {
        ajaxPost('article/getDisableArticle', {}, function () {
            layer.load(1);
        }, function (result) {
            if (result.code === 200) {
                layer.closeAll('loading');
                let data = result.data, html = '';
                if (data.length > 0) {
                    for (let i = 0; i < data.length; i++) {
                        let v = data[i];
                        html += getDiaryDom(v);
                    }
                } else {
                    html += getDefaultDom();
                }
                $('#container').empty().html(html);
            } else {
                layer.closeAll('loading');
                layer.msg(result.message, {icon: 0});
            }
        }, function () {
            layer.closeAll('loading');
            layer.msg('服务器好像出了问题, 请稍后重试', {icon: 0});
        });
    }


    /**
     * 获取一个数据日记的HTML代码
     */
    function getDiaryDom(data) {
        return '<div class="diary" data-id="' + data.articleKey + '">' +
            '<div class="diary_item item_title">' +
            '<span class="title" href="javascript:void(0);">' + data.title + '</span>' +
            '</div>' +
            '<div class="diary_item item_date_view">' +
            '<span class="date_view">' +
            '<i class="fa fa-calendar-o"></i>' +
            '<span class="view_title">发表于:</span>' +
            '<span class="c_date">' + data.createTime.split('T')[0] + '</span>' +
            '</span>' +
            '<span class="date_view">' +
            '<i class="fa fa-calendar-check-o"></i>' +
            '<span class="view_title">更新于:</span>' +
            '<span class="u_date">' + data.updateTime.split('T')[0] + '</span>' +
            '</span>' +
            '<span class="date_view">' +
            '<i class="fa fa-eye"></i>' +
            '<span class="view_title">阅读次数:</span>' +
            '<span class="v_count">' + (data.views ? data.views : 0) + '</span>' +
            '</span>' +
            '</div>' +
            '<div class="diary_item item_more_btn">' +
            '<span class="show_more" onclick="showMore(this)">查看更多 <i class="fa fa-eye" aria-hidden="true"></i></span>' +
            '</div>' +
            '</div>';
    }

    /**
     * 获取默认dom
     */
    function getDefaultDom() {
        return '<div class="diary">' +
            '<div class="diary_item item_title">' +
            '<span class="title" href="javascript:void(0);">抱歉, 你还没有添加任何日记哦</span>' +
            '</div>' +
            '<div class="diary_item item_date_view">' +
            '<span class="date_view">' +
            '<i class="fa fa-telegram" aria-hidden="true"></i>' +
            '<span class="view_title">让我们, </span>' +
            '<span class="c_date">开启征程</span>' +
            '</span>' +
            '</div>' +
            '<div class="diary_item item_more_btn">' +
            '<span class="show_more" onclick="writeDiary()">赶紧添加吧 <i class="fa fa-comments-o" aria-hidden="true"></i></span>' +
            '</div>' +
            '</div>';
    }


    /**
     * 查看更多
     * @param othis
     */
    function showMore(othis) {
        let articleKey = $(othis).parent().parent().attr('data-id');
    }

    function writeDiary() {
        let url = 'menu/write_diary';
        let json = {title: '写日记', area: 7, url: url};
        parent.layopen(json, "init", {}, function () {
            parent.refreshList();
        });
    }


</script>
</body>
</html>